<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>2D转换之缩放scale</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
                margin: 100px auto;
                /* 设置缩放转换的中心点 */
                /* transform-origin: left bottom; */
            }

            div:hover {
                /* 1. 里面写的数值不跟单位。是倍数的意思：1就是1倍；2就是2倍 */
                /* transform: scale(x, y); */
                /* transform: scale(2, 2); */

                /* 2. 修改了宽度为原来的2倍，高度不变 */
                /* transform: scale(2, 1); */

                /* 3. 如果只写一个参数，则代表等比例缩放，同时修改宽度和高度。以下是宽度修改了2倍，高度默认和第一个参数一样*/
                /* transform: scale(2); */

                /* 4. 参数值设置为小于1，则进行缩小 */
                /* transform: scale(0.5, 0.5); */
                /* transform: scale(0.5); */

                /* 5. 与直接设置盒子宽高不同，是向左右与向下扩展。
                      scale 的优势之处： 不会影响其他的盒子，而且可以设置缩放的中心点 */
                /* width: 300px;
                   height: 300px; */
                transform: scale(2);
            }
        </style>
    </head>

    <body>
        <div></div>
        123123
    </body>
</html>
